<template>
	<up-popup :show="show" mode="center" @close="show = false" :safeAreaInsetBottom="false">
		<view class="popup">
			<image class="popup-top-bj" src="@/static/image/popup-bj.png"></image>
			<view class="popup-content">
				<view class="title">
					费用明细
				</view>
				<view class="line">
					里程费：{{ data?.freight_money }}元/{{ data?.linear_distance }}公里
				</view>
				<view class="line">
					保价费：{{ data?.insurance_money }}元
				</view>
				<view class="line">
					感谢费：{{ data?.thank_money }}元
				</view>
				<view class="line">
					特殊照顾：{{ data?.attention_money }}元
				</view>
				<view class="line">
					额外费用：{{ data?.premium }}元
				</view>
				<view class="total_price">
					合计：{{ data?.order_total_amount }}元
				</view>
			</view>
			<image class="close" mode="widthFix" @click="show = alse" src="@/static/image/close.png"></image>
		</view>
	</up-popup>
</template>

<script setup>
	import { ref } from 'vue'
	const props = defineProps({
		data: {
			type: Object,
			default: () => {}
		}
	})
	const show = ref(false)
	const handleClick = () => {
		show.value = true
	}
	defineExpose({
		handleClick
	})
</script>

<style lang="scss" scoped>
	.close {
		position: absolute;
		left: calc(50% - 29rpx);
		bottom: -90rpx;
		width: 58rpx;
	}
	.popup-content {
		.line {
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 30rpx;
			color: #2C1F21;
			line-height: 35rpx;
			margin: 20rpx 0;
		}
		.total_price {
			border-top: 1px solid #F6F6F6;
			text-align: right;
			font-family: PingFang SC, PingFang SC;
			font-weight: 600;
			font-size: 40rpx;
			color: #333333;
			line-height: 45rpx;
			padding-top: 20rpx;
		}
	}
</style>